<template>
  <div id="big">
    <!-- 展示板 -->
    <!-- 做一个轮播 -->
    <div id="wood">
      <div id="Shuffling">
        <!-- 这里的for循环的内容可以进行修改 -->
        <img
          v-for="(datas, index) in shufflingdata"
          :src="require('@/assets/' + datas.url)"
          @click="toDetailed(datas.gid)"
          alt=""
          :key="datas.gid"
          v-show="(show-1) == index"
          
        />
        <li
          :style="1 == show ? { backgroundColor: '#000' } : {}"
          @click="show = 1"
        ></li>
        <br />
        <li
          :style="2 == show ? { backgroundColor: '#000' } : {}"
          @click="show = 2"
        ></li>
        <br />
        <li
          :style="3 == show ? { backgroundColor: '#000' } : {}"
          @click="show = 3"
        ></li>
        <br />
        <li
          :style="4 == show ? { backgroundColor: '#000' } : {}"
          @click="show = 4"
        ></li>
        <br />
        <li
          :style="5 == show ? { backgroundColor: '#000' } : {}"
          @click="show = 5"
        ></li>
      </div>
    </div>
    <div id="drawing">
      <div id="prompt">
        <span>
          {{ defaults.text }}
        </span>
      </div>
      <div id="datas">
        <ul>
          <li class="card" v-for="datas in listdata" :key="datas.gid">
            <!-- @click="toDetailed(defaults.text,datas.id)"> :href="'/detailed?id='+datas.id" -->
            <a
              @click="toDetailed(datas.gid)"
              style="text-decoration: none"
              target="_blank"
            >
              <img :src="require('@/assets/' + datas.url)" :alt="datas.gname" />
              <p id="money">{{ datas.price }}</p>
              <p id="name">{{ datas.gname }}</p>
              <p id="date">{{ datas.date }}</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import VueCookies from "vue-cookies";
export default {
  props: ["defaults", "listdata"],
  router: router,
  mounted() {
    // 生命钩子，挂载完毕时调用【定时器】
    this.timer = setInterval(this.shuffling, 3000);
  },
  beforeDestroy() {
    // 生命钩子，摧毁时调用
    this.stop();
  },
  methods: {
    // 定时器
    shuffling: function () {
      if (this.show < 5) {
        this.show += 1;
      } else {
        this.show = 1;
      }
    },
    stop() {
      clearInterval(this.timer);
    },
    // 跳转到详细页面，通过id查询
    toDetailed: function (id) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        return false;
      } else {
        VueCookies.set("gid", id); // 存gid到cookie中
        var url = "/detailed?";
        window.location.replace(url);
      }
    },
  },
  data() {
    return {
      uid: "",
      show: 1,
      shufflingdata: [
        {
          date: "2022-12-04",
          detailed: "win7，100T固态硬盘",
          gid: 1,
          gname: "笔记本电脑",
          gtype: "闲置数码",
          hidden: 0,
          price: 2399.0,
          state: 1,
          uid: 1,
          url: "GUF1670126597890.png",
        },
        {
          date: "2022-12-04",
          detailed: "卷卷",
          gid: 2,
          gname: "美团优惠卷",
          gtype: "票卷小物",
          hidden: 0,
          price: 10.0,
          state: 1,
          uid: 1,
          url: "YFG1670126630321.jpg",
        },
        {
          date: "2022-12-01",
          detailed: "用了一半",
          gid: 3,
          gname: "过期口红",
          gtype: "美妆衣物",
          hidden: 0,
          price: 888.0,
          state: 0,
          uid: 12,
          url: "hmW1669866846698.jpg",
        },
     
     
        {
          date: "2022-12-01",
          detailed: "可以拍月球",
          gid: 7,
          gname: "数码相机",
          gtype: "闲置数码",
          hidden: 0,
          price: 500.0,
          state: 1,
          uid: 12,
          url: "qkh1669867054653.jpg",
        },
     
        {
          date: "2022-12-01",
          detailed: "完成悄悄咪咪卷专用",
          gid: 9,
          gname: "台灯",
          gtype: "电器日用",
          hidden: 0,
          price: 20.0,
          state: 0,
          uid: 1,
          url: "CYB1669867106476.jpg",
        },
 

      ],
    };
  },
};
</script>

<style scoped>
#big {
  width: 1100px;
  position: relative;
  padding-top: 100px;
  left: 280px;
}
#big #wood {
  width: 90%;
  height: 380px;
  margin-left: 5%;
  margin-top: 10px;
  cursor: pointer; /* 经过有手指*/
  background-image: url("../assets/biglogo.png");
  /* overflow: hidden; */
  background-size: 100% 380px;
}

#Shuffling {
  display: inline-block;
  width: 500%;
}

#Shuffling li {
  display: inline-block;
  list-style-type: none;
  width: 28px;
  height: 28px;
  background-color: #d9d9d9;
  border-radius: 15px;
  margin-bottom: 20px;
  margin-left: 5px;
}

#wood #Shuffling img {
  float: left;
  width: 20%;
  height: 380px;
}

#drawing #prompt {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 20px;
  border-bottom: 2px solid #d9d9d9;
}
#drawing #prompt span {
  font-size: 24px;
  margin-left: 5%;
  padding-bottom: 8px;
  border-bottom: 5px solid #0bb9f8;
}
#datas {
  width: 100%;
}
#datas .card {
  display: inline-block;
  width: 25%;
  height: 400px;
  text-align: center;
  margin-left: 5%;
  margin-bottom: 5%;
  cursor: pointer; /* 经过有手指*/
  box-shadow: 0px 0px 10px 3px #aaa;
}

#datas .card img {
  width: 100%;
  height: 300px;
}

#datas .card p {
  text-align: left;
  margin-left: 20px;
  margin-top: 8px;
  margin-bottom: 0px;
  border: 0px;
}

#datas .card #money {
  font-size: 20px;
  color: rgb(238, 11, 11);
}
#datas .card #date {
  font-size: 13px;
  color: #a9a9b3;
}
</style>